<template>
  <div class="table-box">
    <ProTable ref="proTable" title="角色列表" row-key="id" :indent="30" :columns="columns" :request-api="categoryList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="toDetail(0)" v-auth="'create'">{{ $t("common.add") }}</el-button>
      </template>
      <!-- 菜单图标 -->
      <template #logo="scope">
        <el-image :src="scope.row.logo" />
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="toDetail(scope.row.id)" v-auth="'modify'">
          {{ $t("common.edit") }}
        </el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteRole(scope.row)" v-auth="'delete'">
          {{ $t("common.del") }}
        </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="menuMange">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ColumnProps } from "@/components/ProTable/interface";
import { categoryList, categoryDel, categoryStatus } from "@/api/modules/product";
import { Delete, EditPen, CirclePlus, Menu } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { BUTTONS } = useAuthButtons();
const router = useRouter();
const { t } = useI18n();
const proTable = ref();

// 跳转详情页
const toDetail = (id: number) => {
  if (id) return router.push(`/product/category/modify/${id}`);

  return router.push(`/product/category/create`);
};

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "id", label: "ID", width: 120 },
  { prop: "name", label: t("product.category.name"), search: { el: "input" } },
  { prop: "parent.name", label: t("product.category.parent_name") },
  { prop: "logo", label: t("product.category.logo") },
  { prop: "note", label: t("product.category.note") },
  {
    prop: "status",
    label: t("common.status"),
    enum: [
      { label: t("common.normal"), value: 10 },
      { label: t("common.disable"), value: 20 }
    ],
    render: scope => {
      return (
        <>
          {BUTTONS.value.status ? (
            <el-switch
              model-value={scope.row.status}
              active-text={scope.row.status == 10 ? t("common.normal") : t("common.disable")}
              active-value={10}
              inactive-value={20}
              onClick={() => changeStatus(scope.row)}
            />
          ) : (
            <el-tag type={scope.row.is_hide ? "danger" : "success"}>
              {scope.row.status == 10 ? t("common.normal") : t("common.disable")}
            </el-tag>
          )}
        </>
      );
    }
  },
  { prop: "operation", label: t("common.operation"), width: 250, fixed: "right" }
];

// 删除菜单（示例、根据自己后端接口来）
const deleteRole = async (params: Menu.MenuOptions) => {
  await useHandleData(categoryDel, { id: params.id }, `删除【${params.name}】菜单`);
  proTable.value.getTableList();
};

const changeStatus = item => {
  item.status = item.status == 10 ? 20 : 10;
  categoryStatus(item).then(response => {
    proTable.value.getTableList();
    ElMessage.success(response.message);
  });
};
</script>
